<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" >
    <meta name="baidu-site-verification" content="iJemnNsV3M" />
    
    <title>Vue入门教程（二） | lupin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" >
    <meta name="keywords" content="全栈" >
    <meta name="description" content="全栈" >

    
    <link rel="shortcut icon" href="/img/favicon.png" >
    
    
<link rel="stylesheet" href="/css/style.css">

    <!--[if lt IE 9]>
    
<script src="/js/html5.js"></script>

    <![endif]-->
    
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d5ebf515ab530cfbdda5f5c85093fb41";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


<meta name="generator" content="Hexo 4.2.0"></head>

<body class="home">
    <!--[if lt IE 9]>
    <div class="browsehappy">
        当前网页 <strong>不支持</strong>
        你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank" rel="noopener">升级你的浏览器</a>.
    </div>
    <![endif]-->

    <!-- 博客头部 -->
    <header class="header">
    <section class="container header-main">
        <div class="logo">
            <a href="/">
                <div class="cover">
                    <span class="name">lupin</span>
                    <span class="description">博客</span>
                </div>
            </a>
        </div>
        <div class="dropnav icon-paragraph-justify" id="ALLVAR__btnDropNav"></div>
        <ul class="menu hidden" id="ALLVAR__menu">
            
            <li rel="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/index.html" class="item ">
                <a href="/" title="首页" class="icon-home">&nbsp;首页</a>
            </li>
            
            <li rel="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/index.html" class="item ">
                <a href="/lab/" title="实验室" class="icon-lab">&nbsp;实验室</a>
            </li>
            
            <li rel="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/index.html" class="item ">
                <a href="/about/" title="关于" class="icon-about">&nbsp;关于</a>
            </li>
            
        </ul>
        <div class="profile clearfix">
            <div class="feeds fl">
                
                
                <p class="links">
                    
                        <a href="https://gitee.com/Shr9527" target="_blank">码云</a>
                        |
                    
                        <a href="https://gitee.com" target="_blank">Hosted by Gitee Pages</a>
                        
                    
                </p>
                <p class="sns">
                    
                    <a href="javascript: void(0);" class="wechat">
                        <b>■</b>
                        公众号
                        <span class="popover">
                            <img src="/img/wechat_mp.jpg" width="120" height="120" alt="我的微信订阅号">
                            <i class="arrow"></i>
                        </span>
                    </a>
                </p>
                
            </div>
            <div class="avatar fr">
                <img src="/img/favicon.png" alt="avatar" title="AllVar" >
            </div>
        </div>
    </section>
</header>


    <!-- 博客正文 -->
    <div class="container body clearfix">
        <section class="content">
            <div class="content-main widget">
                <!-- 文章页 -->
<!-- 文章 -->
<article class="post article">
    <header class="text-center">
        <h3 class="post-title"><span>Vue入门教程（二）</span></h3>
    </header>
    <p class="post-meta text-center">
         发表于
        <time datetime="2020-05-27T16:39:01.000Z">2020-05-28</time>
    </p>
    <div class="post-content">
        <h3 id="使用vue-cli创建项目框架"><a href="#使用vue-cli创建项目框架" class="headerlink" title="使用vue-cli创建项目框架"></a>使用vue-cli创建项目框架</h3><h4 id="1-什么是vue-cli"><a href="#1-什么是vue-cli" class="headerlink" title="1.什么是vue-cli"></a>1.什么是vue-cli</h4><a id="more"></a>

<p>vue-cli是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。</p>
<h4 id="2-全局安装vue-cli"><a href="#2-全局安装vue-cli" class="headerlink" title="2.全局安装vue-cli"></a>2.全局安装vue-cli</h4><p>(1) 检查npm 版本，建议安装到最新版本。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"># 命令行查看版本号</span><br><span class="line">    node -v</span><br><span class="line">    npm -v</span><br><span class="line"></span><br><span class="line"># 升级npm（可选操作）</span><br><span class="line">    npm install -g npm</span><br><span class="line"></span><br><span class="line"># 临时修改为淘宝镜像（可选操作）</span><br><span class="line">    npm --registry https:&#x2F;&#x2F;registry.npm.taobao.org i</span><br><span class="line"></span><br><span class="line"># 永久修改为淘宝镜像（可选操作）</span><br><span class="line">    npm config set registry &quot;https:&#x2F;&#x2F;registry.npm.taobao.org&quot;</span><br></pre></td></tr></table></figure>

<p>(2) 安装</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"># 全局安装 webpack (3.x版本)</span><br><span class="line">    npm install webpack -g</span><br><span class="line"></span><br><span class="line"># 全局安装 webpack (4.x版本), 需要安装 webpack-cli 依赖</span><br><span class="line">    npm install webpack webpack-cli -g</span><br><span class="line"></span><br><span class="line"># 查看版本号</span><br><span class="line">    webpack -v</span><br><span class="line"></span><br><span class="line"># 全局安装vue-cli (4.0版本)推荐</span><br><span class="line">    npm install -g @vue&#x2F;cli</span><br><span class="line"></span><br><span class="line"># 查看vue-cli版本号</span><br><span class="line">    vue -V</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注：<br>　　若出现“Unexpected end of JSON input while parsing near”错误，<br>　　命令行输入： npm cache clean –force</p>
</blockquote>
<h4 id="3-创建项目（命令行方式）"><a href="#3-创建项目（命令行方式）" class="headerlink" title="3.创建项目（命令行方式）"></a>3.创建项目（命令行方式）</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"># 命令行进入该目录</span><br><span class="line">    cd 项目目录</span><br><span class="line"></span><br><span class="line"># 下载模板</span><br><span class="line">    vue create vue-demo</span><br><span class="line"></span><br><span class="line"># 进入交互页面，根据自己情况选择（上下方向键未选择，回车为确认选择，空格为选择和取消选择）</span><br><span class="line">    </span><br><span class="line">    # 选择配置</span><br><span class="line">        ? Please pick a preset: (Use arrow keys)</span><br><span class="line">        default (babel, eslint)  默认配置</span><br><span class="line">        &gt; Manually select features  自定义配置</span><br><span class="line"></span><br><span class="line">    # 自定义配置（选择Babel、Router、Vuex、CSS Pre-processors）</span><br><span class="line">        ? Check the features needed for your project:</span><br><span class="line">        &gt; (*) Babel</span><br><span class="line">          ( ) TypeScript</span><br><span class="line">          ( ) Progressive Web App (PWA) Support</span><br><span class="line">          (*) Router</span><br><span class="line">          (*) Vuex</span><br><span class="line">          (*) CSS Pre-processors</span><br><span class="line">          ( ) Linter &#x2F; Formatter</span><br><span class="line">          ( ) Unit Testing</span><br><span class="line">          ( ) E2E Testing</span><br><span class="line"></span><br><span class="line">    # 选择路由类型 【history、hash】（选择history）</span><br><span class="line">        ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y&#x2F;n) Y</span><br><span class="line"></span><br><span class="line">    # 选择CSS预处理方式（选择Less）</span><br><span class="line">        ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)</span><br><span class="line">          Sass&#x2F;SCSS (with dart-sass)</span><br><span class="line">          Sass&#x2F;SCSS (with node-sass)</span><br><span class="line">        &gt; Less</span><br><span class="line">          Stylus</span><br><span class="line"></span><br><span class="line">    # 选择Babel、Eslint等配置文件的存放方式（选择将配置放在专用文件中）</span><br><span class="line">        ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)</span><br><span class="line">        &gt; In dedicated config files</span><br><span class="line">          In package.json                                                                                                    </span><br><span class="line">    # 选择是否保留选择选项，方便后续创建项目（选择N）</span><br><span class="line">        ? Save this as a preset for future projects? (y&#x2F;N)   </span><br><span class="line"></span><br><span class="line">        选择y </span><br><span class="line">        ? Save preset as: 预设名称</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注：被保存的 preset 将会存在 C:\Users\你的用户名，这个地址里有一个.vuerc 文件，可以修改或者删除被保存的 preset ，修改之后的预设会再下一次新建项目的时候生效。也可以拷贝这个文件到别的电脑，这样在新建项目的时候会使用同样的预设。</p>
</blockquote>
<h4 id="4-等待项目创建以及项目创建成功"><a href="#4-等待项目创建以及项目创建成功" class="headerlink" title="4.等待项目创建以及项目创建成功"></a>4.等待项目创建以及项目创建成功</h4><p><img src="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/001.png" alt></p>
<p><img src="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/002.png" alt></p>
<h4 id="5-启动项目、打包项目"><a href="#5-启动项目、打包项目" class="headerlink" title="5.启动项目、打包项目"></a>5.启动项目、打包项目</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># 启动项目</span><br><span class="line">npm run serve</span><br></pre></td></tr></table></figure>

<p><img src="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/003.png" alt></p>
<p><img src="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/004.png" alt></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"># 打包项目</span><br><span class="line">npm run build</span><br></pre></td></tr></table></figure>

<p><img src="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/005.png" alt></p>

    </div>
    <p class="post-meta">
        <span class="post-cat">分类：
            <a class="cat-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        </span>
        <span class="post-tags">
            标签：
            
    
        <a href="/tags/vue/" title="vue">vue</a> / 
    
        <a href="/tags/javascript/" title="javascript">javascript</a>
    

        </span>
    </p>
</article>
<!-- 分享按钮 -->

  <div class="article-share clearfix text-center">
    <div class="share-area">
      <span class="share-txt">分享到：</span>
      <a href="javascript: window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(location.href) + '&title=' + document.title + '&language=zh_cn');" class="share-icon weibo"></a>
      <a href="javascript: alert('请复制链接到微信并发送');" class="share-icon wechat"></a>
      <a href="javascript: window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(location.href) + '&title=' + document.title);" class="share-icon qqzone"></a>
      <a href="javascript: window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(location.href) + '&desc=AllVar个人博客&title=' + document.title + '&callback=' + encodeURIComponent(location.href));" class="share-icon qq"></a>
      <a href="javascript: window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent(location.href) + '&name=' + document.title + '&text=' + document.title);" class="share-icon douban"></a>
    </div>
  </div>


<!-- 上一篇/下一篇 -->

<div class="article-nav clearfix">
    
    <span class="prev fl">
        上一篇<br >
        <a href="/2020/05/28/Vue/03.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%B8%89%EF%BC%89/">
            
                Vue入门教程（三）
            
        </a>
    </span>
    

    
    <span class="next fr">
        下一篇<br >
        <a href="/2020/05/27/Tool/VisualStudio/01.%20Visual-Studio-2019%E5%AE%89%E8%A3%85/">
            
                Visual Studio安装
            
        </a>
    </span>
    
</div>

<!-- 文章评论 -->


            </div>

        </section>
        <!-- 侧栏部分 -->
<aside class="sidebar">
    
    <section class="widget">
        <h3 class="widget-hd"><strong>文章搜索</strong></h3>
        <div class="search-form">
  <form
    id="searchForm"
    method="GET"
    action="https://www.baidu.com/s"
    ectype="application/x-www-form-urlencoded"
    target="_blank"
    autocomplete="false"
    onsubmit="javascript: return false;">
    <input
      id="searchKeyword"
      type="text"
      class="form-control"
      placeholder="输入关键字搜索"
      autocomplete="false"
    />
    <input id="searchKeywordHidden" type="hidden" name="wd" />
    <input id="searchButton" class="btn" type="submit" value="搜索" />
  </form>
</div>
    </section>
    

    <section class="widget">
        <h3 class="widget-hd"><strong>文章分类</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
    <li>
        <a href="/categories/%E5%90%8E%E7%AB%AF/">后端</a>
        <span class="badge">(20)</span>
    </li>
    
    <li>
        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        <span class="badge">(3)</span>
    </li>
    
    <li>
        <a href="/categories/%E5%B7%A5%E5%85%B7/">工具</a>
        <span class="badge">(2)</span>
    </li>
    
</ul>
    </section>

    
    <section class="widget">
        <h3 class="widget-hd"><strong>热门标签</strong></h3>
        <!-- 文章标签 -->
<div class="widget-bd tag-wrap">
  
    <a class="tag-item" href="/tags/centeros/" title="centeros">centeros (4)</a>
  
    <a class="tag-item" href="/tags/python/" title="python">python (1)</a>
  
    <a class="tag-item" href="/tags/docker/" title="docker">docker (6)</a>
  
    <a class="tag-item" href="/tags/cpp/" title="cpp">cpp (8)</a>
  
    <a class="tag-item" href="/tags/dotnet-core/" title="dotnet core">dotnet core (1)</a>
  
    <a class="tag-item" href="/tags/nginx/" title="nginx">nginx (1)</a>
  
    <a class="tag-item" href="/tags/redis/" title="redis">redis (2)</a>
  
    <a class="tag-item" href="/tags/unity/" title="unity">unity (3)</a>
  
    <a class="tag-item" href="/tags/c/" title="c#">c# (3)</a>
  
    <a class="tag-item" href="/tags/vue/" title="vue">vue (3)</a>
  
    <a class="tag-item" href="/tags/javascript/" title="javascript">javascript (3)</a>
  
    <a class="tag-item" href="/tags/visual-studio/" title="visual studio">visual studio (1)</a>
  
    <a class="tag-item" href="/tags/tool/" title="tool">tool (2)</a>
  
    <a class="tag-item" href="/tags/vscode/" title="vscode">vscode (1)</a>
  
</div>
    </section>
    

    
    <!-- 友情链接 -->
    <section class="widget">
        <h3 class="widget-hd"><strong>友情链接</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
        <li>
            <a href="https://gitee.com/Shr9527" target="_blank" title="码云博客">码云博客</a>
        </li>
    
</ul>
    </section>
    
</aside>
<!-- / 侧栏部分 -->
    </div>

    <!-- 博客底部 -->
    <footer class="footer">
    &copy;
    
        2016-2020
    

    <a href="/">AllVar Loves You</a>
</footer>
<div class="back-to-top" id="ALLVAR__backToTop" title="返回顶部">返回顶部</div>

    <!--博客js脚本 -->
    <!-- 这里放网站js脚本 -->

<script src="/js/main.js?v=1590833788380.js"></script>

</body>
</html>